<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/editor/css/editormd.min.css">
    <script src="/js/submit_button.js"></script>
    <link rel="stylesheet" href="/js/prettify/skins/sunburst.css">
    <title></title>
    <style>
        .ui.fluid.container {
            max-width: 95% !important;
        }
    </style>
</head>
<body>
<main class="ui container fluid" id="vue-problem">
    <div class="ui grid two column row">
        <div class="ui four wide column">
            <div class="ui padded blue segment" :class="{loading:!ready}">
                <div class="ui dividing center aligned grey header">标签</div>
                <div v-for="t in tags" v-html="t.name" class="ui small label" :class="[colorClass()]"></div>
            </div>
            <div class="ui  green segment">
                <table class="ui selectable single line very compact small striped center aligned table">
                    <thead>
                    <tr>
                        <th>提交结果 <i class="ui icon green sync link" @click="get_history_data()"></i></th>
                        <th>提交时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="s in status">
                        <td class="view-code" v-bind:id="s.id" v-bind:class="{
                            positive:s.result=='Accepted',
                            warning:s.result=='Pending',
                            error:s.result!='Accepted'&&s.result!='Pending'
                            }">{{s.normalResult}}
                        </td>
                        <td class="">{{s.normalSubmitTime.substring(0,16)}}</td>
                    </tr>
                    </tbody>
                </table>
                <a v-bind:href="'/status?pid='+problem_id">More</a>
            </div>
            <div class="ui red segment" v-if="isAccepted">
                <a class="ui blue button inverted fluid" :href="'/problems/article/'+problem_id">题解</a>
            </div>
        </div>
        <div class="ui container twelve wide column">
            <div class="ui raised piled segments fluid">
                <div class="ui secondary center aligned segment" v-bind:class="{loading:!dataready}">
                    <h1>{{problem.title}}</h1>
                    <table class="ui center aligned celled table very compact">
                        <thead>
                        <tr>
                            <th><i class="ui clock outline icon"></i>Time Limit</th>
                            <th><i class="ui database icon"></i>Memory Limit</th>
                            <th><i class="ui upload icon"></i>Submitted</th>
                            <th><i class="ui check icon"></i>Accepted</th>
                            <th><i class="ui star icon"></i>积分</th>
                            <th><i class="ui globe icon"></i>来源</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{problem.timeLimit}}ms</td>
                            <td>{{problem.memoryLimit}}B</td>
                            <td>{{problem.submitted}}</td>
                            <td>{{problem.accepted}}</td>
                            <td>{{problem.score}}</td>
                            <td>{{problem.source}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="ui padded segment" v-bind:class="{loading:!dataready}">
                    <h2 class="">题目描述</h2>
                    <div class=" md-text">
                        <textarea style="display: none" v-html="problem.description"></textarea>
                    </div>
                </div>
                <div class="ui segment" v-bind:class="{loading:!dataready}">
                    <h2 class="">输入</h2>
                    <div class=" md-text">
                        <textarea style="display: none;" v-html="problem.input"></textarea>
                    </div>
                </div>
                <div class="ui segment" v-bind:class="{loading:!dataready}">
                    <h2 class="">输出</h2>
                    <div class=" md-text">
                        <textarea style="display: none;" v-html="problem.output"></textarea>
                    </div>
                </div>
                <div class="ui segment" v-bind:class="{loading:!dataready}">
                    <h2 class="">样例输入
                        <button class="ui small button btn-copy"
                                data-clipboard-target="#input-content" data-clipboard-action="copy">Copy
                        </button>
                    </h2>

                    <pre class="" id="input-content" v-html="problem.sampleInput"></pre>
                </div>
                <div class="ui segment" v-bind:class="{loading:!dataready}">
                    <h2 class="">样例输出
                        <button class="ui button small btn-copy"
                                data-clipboard-target="#output-content" data-clipboard-action="copy">Copy
                        </button>
                    </h2>
                    <pre class="" id="output-content" v-html="problem.sampleOutput"></pre>
                </div>
                <div class="ui tertiary segment" v-bind:class="{loading:!dataready}">
                    <h2 class="">提示</h2>
                    <div class="md-text">
                        <textarea style="display: none;" v-html="problem.hint"></textarea>
                    </div>
                </div>
            </div>
            <div class="ui segment">
                <form id="form" class="ui form">
                    <div>
                        <label for="language">语言 :</label>
                        <select class="ui search dropdown" id="language" name="language" v-model="language"
                                v-on:change="change_lang()">
                            <option value="c">C</option>
                            <option selected value="cpp">C++</option>
                            <option value="java">Java</option>
                            <option value="py2">Python2</option>
                            <option value="py3">Python3</option>
                            <option value="go">Golang</option>
                        </select>
                        <div class="ui checked  checkbox">
                            <label for="share">分享代码</label>
                            <input id="share" name="share" v-model="share" type="checkbox">
                        </div>
                    </div>
                    <div id="code-editor">
                        <textarea style="display:none;"></textarea>
                    </div>
                    <submit-button v-on:submit="submit"></submit-button>
                </form>
            </div>
        </div>
    </div>

</main>
<div class="ui large modal" id="codemodal">
    <div class="">
        <div class="" style="padding: 1rem;">
            <div class="ui header">
                <h4 class="">#<span id="modal-id"></span>&nbsp;用户名：<abbr id="modal-username"></abbr>&nbsp;题目：<abbr
                        id="modal-problem"></abbr></h4>
            </div>
            <div class="scrolling content">
                <table class="ui celled table">
                    <thead class="center aligned">
                    <tr>
                        <th><i class="fa fa-check-circle"></i>结果</th>
                        <th><i class="fa fa-clock-o"></i>用时(ms)</th>
                        <th><i class="fa fa-database"></i>内存(Byte)</th>
                        <th><i class="fa fa-files-o"></i>代码长度</th>
                        <th><i class="fa fa-keyboard-o"></i>语言</th>
                        <th><i class="fa fa-calendar"></i>提交时间</th>
                    </tr>
                    </thead>
                    <tbody class="text center aligned">
                    <td id="modal-result">{{normalResult}}</td>
                    <td id="modal-time">{{time}}</td>
                    <td id="modal-memory">{{memory}}</td>
                    <td id="modal-length">{{length}}</td>
                    <td id="modal-language">{{normalLanguage}}</td>
                    <td id="modal-submit-time">{{normalSubmitTime}}</td>
                    </tbody>
                </table>
                <button class="ui button red" id="modal-share">
                    Not Shared
                </button>
                <pre id="modal-ce"></pre>
                <pre class="prettyprint" id="source_code"></pre>
            </div>
            <div class="actions">
                <button class="ui black deny button"><i class="close icon"></i>Close</button>
            </div>
        </div>
    </div>
</div>
<script src="/editor/lib/marked.min.js"></script>
<script src="/editor/lib/raphael.min.js"></script>
<script src="/editor/lib/underscore.min.js"></script>
<script src="/editor/lib/sequence-diagram.min.js"></script>
<script src="/editor/lib/flowchart.min.js"></script>
<script src="/editor/lib/jquery.flowchart.min.js"></script>
<script src="/editor/editormd.min.js"></script>
<script src="/js/lib/clipboard.min.js"></script>
<script language="JavaScript" src="/js/StatusInModal.js"></script>
<script>
    $('.ui.checkbox').checkbox();
    pid = location.pathname.split('/');
    pid = pid[pid.length - 1];
    var clipboard = new ClipboardJS('.btn-copy');
    clipboard.on('success', function (e) {
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
</script>
<script src="/js/showproblem.js"></script>
<footer th:replace="~{fragment/footer :: footer}"></footer>
</body>
</html>